<template>
  <div>
    <el-card class="center_card">
      <h3 style="margin: 0" slot="header">热点图书</h3>
<!--      <div style="display:flex;justify-content:space-between;flex-wrap:wrap">
        <div style="width: 50%" v-for="(item,index) in books" :key="index">
          <el-card style="margin: 5px;" body-style="display:flex">
            <div style="width: 30%">
              <a href="/#/home/bookdetail"><img src="../../imgs/liuduo.jpg" style="height: 150px"></a>
            </div>
            <div style="width: 70%">
              <p>书名：<span>{{item}}</span></p>
              <p>作者：<span>{{index}}</span></p>
              <el-button-group>
                <el-button plain size="small" type="primary">加入购物车</el-button>
                <el-button plain size="small" type="danger">直接购买</el-button>
              </el-button-group>

            </div>
          </el-card>
        </div>

      </div>-->
       <el-tabs>
         <el-tab-pane v-loading="loading" label="购买最多">
           <book-list  :book-list="books"></book-list>
         </el-tab-pane>
         <el-tab-pane label="浏览最多">

         </el-tab-pane>
       </el-tabs>

    </el-card>
  </div>
</template>

<script>
  import axios from 'axios'
  import BookList from "../../reusable/BookList";
export default {
  name: "Hot",
  components: {BookList},
  data(){
    return{
      loading:true,
      books:[
      ],
    }
  },
  mounted() {
    this.getList()
  },
  methods:{
    async getList(){
      axios.post('/api/book/getTop50/All').then((res)=>{
        this.books=res.data.data
        console.log(this.books)
        this.loading=false
      })
    },
  }
}
</script>

<style scoped>
  .container{
    width: 100%;
  }
  .center_card{
    width: 70%;
    margin: auto;
  }
  .center{
    width: 70%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .book_area{
    width: 20%;
    display: flex;
    justify-content: center;
    margin: 10px 0 10px 0;
  }
  .image{
    width: 225px;
    height: 250px;
  }
</style>
